/**
 * 数据定义管理
 */
import {useEffect, useState} from 'react';
import {Button, Layout, List, Tooltip, Typography, Table, Row, Card, Space, Input} from "antd";
import pageStore from './store';
import {dateFormat, dictFind} from "@/common/utils";
import {PlusOutlined, CheckOutlined} from "@ant-design/icons";
import {AUDIT_FLAG_LIST, DEF_TYPE_LIST, EDIT_TYPE_MAP} from "./constants";
import AreaDrawer, {AreaInfo} from "./components/AreaDrawer";
import DefDrawer from "./components/DefDrawer";

const {Sider, Content} = Layout;

function AreaList(props) {
  const {loading, dataList, dispatchers} = props;
  const [current, setCurrent] = useState('');
  return (
    <Card
      title="数据域"
      key="area-list-card"
      extra={
        <div className={"card-tool"}>
          <Tooltip title="添加数据域">
            <Button
              type="default"
              shape="circle"
              style={{float: "right"}}
              icon={<PlusOutlined/>}
              onClick={dispatchers.onAdd}
            />
          </Tooltip>
        </div>
      }
      style={{width: "100%"}}>
      <List
        size={"small"}
        loading={loading}
        dataSource={dataList}
        style={{padding: '0 10px'}}
        renderItem={(item: AreaInfo) => (
          <List.Item key={item.code} className={'me-list-item ' + (current === item.code ? "me-active" : "")}>
            <span onClick={() => {
              setCurrent(item.code);
              dispatchers.onSearch(item.code);
            }}>
              {item.name}
              <Typography.Text code>{item.code}</Typography.Text>
            </span>
            <Tooltip title="编辑">
              <Button
                type="default"
                shape="circle"
                size={"small"}
                style={{float: "right"}}
                onClick={dispatchers.onEdit}
                icon={<i className="fa fa-pencil-square-o" aria-hidden="true"/>}
              />
            </Tooltip>
          </List.Item>
        )}
      />
    </Card>
  );
}

function DataDefTable(props) {
  const {actions} = props;
  const {page, pageSize, total} = props;
  const {loading, dataList} = props;

  const columns = [
    {
      title: '编码',
      dataIndex: 'code',
      key: 'code',
      width: 100,
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: 150,
      ellipsis: true,
    },
    {
      title: '类型',
      width: 80,
      dataIndex: 'type',
      key: 'type',
      render: (value) => (dictFind(value, DEF_TYPE_LIST))
    },
    {
      title: '状态',
      width: 80,
      dataIndex: 'auditFlag',
      key: 'auditFlag',
      render: (value) => (dictFind(value, AUDIT_FLAG_LIST))
    },
    {
      title: '版本',
      width: 50,
      dataIndex: 'version',
      key: 'version',
    },
    {
      title: '创建时间',
      width: 140,
      dataIndex: 'createdTime',
      key: 'createdTime',
      render: (value) => (dateFormat(value))
    },
    {
      title: '操作',
      width: 100,
      dataIndex: 'auditFlag',
      key: 'auditFlag',
      render: (auditFlag, rec) => (
        <Space size={0.5}>
          <Tooltip title="编辑">
            <Button type="link" shape="circle" size="small" onClick={() => actions.onEdit(rec)}>
              <i className="fa fa-pencil-square-o" aria-hidden="true"/>
            </Button>
          </Tooltip>
          <Tooltip title="删除">
            <Button type="link" size="small" disabled={auditFlag > 3} onClick={() => actions.onDelete(rec)}>
              <i className="fa fa-trash-o" aria-hidden="true"/>
            </Button>
          </Tooltip>
          <Tooltip title="配置">
            <Button type="link" size="small" disabled={auditFlag > 3}>
              <i className="fa fa-cogs" aria-hidden="true"/>
            </Button>
          </Tooltip>
        </Space>
      ),
    },
  ];

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    }
  };

  return (
    <Card
      title="数据定义"
      key="data-def-card"
      extra={
        <div className={"card-tool"}>
          <Input.Search
            placeholder="编码/名称"
            onSearch={actions.onSearch}
            style={{width: 200}}
          />
          <Tooltip title="新增">
            <Button
              shape="circle"
              icon={<PlusOutlined/>}
              onClick={actions.onAdd}
            />
          </Tooltip>
          <Tooltip title="提交">
            <Button
              shape="circle"
              icon={<CheckOutlined/>}
            />
          </Tooltip>
        </div>
      }
      style={{width: "100%"}}>
      <Row>
        <Table
          rowSelection={{
            type: 'checkbox',
            ...rowSelection,
          }}
          rowKey="uid"
          columns={columns}
          size={"small"}
          bordered
          loading={loading}
          dataSource={dataList}
          pagination={{
            pageSize: pageSize,
            current: page,
            total: total,
            showTotal: (total) => `共${total}条`,
            onChange: (page, pageSize) =>  actions.onPageChange({page, pageSize})
          }}
          scroll={{y: 600}}
        />
      </Row>
    </Card>
  );
}

export default function ModelMgr() {
  const [areaState, areaDispatchers] = pageStore.useModel('area');
  const [defState, defDispatchers] = pageStore.useModel('def');
  useEffect(() => {
    areaDispatchers.getAreaList().then();
    defDispatchers.getDefPage().then();
  }, []);

  return (
    <Layout style={{height: "100%"}} className={"model-layout"}>
      <Sider theme={"light"} width={220} style={{}}>
        <AreaList
          loading={areaState.listLoading}
          dataList={areaState.dataList}
          dispatchers={{
            onAdd: () => {areaDispatchers.showAreaDrawer(EDIT_TYPE_MAP.ADD)},
            onEdit: (rec) => {
              areaDispatchers.setSelected(rec);
              areaDispatchers.showAreaDrawer(EDIT_TYPE_MAP.EDIT);
            },
            onSearch: (areaCode) => {
              defDispatchers.updateFilter({areaCode: areaCode});
              defDispatchers.onSearch().then();
            }
          }}
        />
      </Sider>
      <Content style={{paddingLeft: "5px", border: "1px solid #f0f0f0"}}>
        <DataDefTable
          {...defState}
          loading={defState.pageLoading}
          dataList={defState.dataList}
          actions={{
            ...defDispatchers,
            onAdd: () => {
              defDispatchers.showDefDrawer(EDIT_TYPE_MAP.ADD)
            },
            onDelete: (rec) => {
              defDispatchers.deleteDefInfo(rec)
            },
            onEdit: (rec) => {
              defDispatchers.setSelected(rec);
              defDispatchers.showDefDrawer(EDIT_TYPE_MAP.EDIT);
            },
            onSearch: (searchText) => {
              defDispatchers.updateFilter({searchText: searchText});
              defDispatchers.onSearch().then();
            }
          }}
        />
      </Content>
      <AreaDrawer
        type={areaState.drawerType}
        originValues={areaState.selectRec}
        visible={areaState.drawerVisible}
        dispatchers={{
          onClose: areaDispatchers.closeAreaDrawer,
          onAdd: areaDispatchers.addAreaInfo,
          onUpdate: areaDispatchers.updateAreaInfo,
        }}
      />
      <DefDrawer
        type={defState.drawerType}
        originValues={defState.selectRec}
        visible={defState.drawerVisible}
        areaCode={defState.filter.areaCode}
        areaList={areaState.dataList}
        dispatchers={{
          onClose: defDispatchers.closeDefDrawer,
          onAdd: defDispatchers.addDefInfo,
          onUpdate: defDispatchers.updateDefInfo,
        }}
      />
    </Layout>
  );
}
